<template>
  <div class>
    <div style="padding:30px 30px 0px 30px;">
      <el-row>
        <el-col :span="6">
          用户名：
          <el-input v-model="sname" placeholder style="width: 120px;"></el-input>
        </el-col>
        <el-col :span="6">
          性别：
          <el-select v-model="sex" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="initdata">查询</el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="isadd()">添加记录</el-button>
        </el-col>
      </el-row>
    </div>

    <div style="margin:20px;">
      <el-table :data="tableData" border stripe>
        <!-- <el-table-column prop="id" label="id" align="center"></el-table-column> -->
        <!-- <el-table-column prop="openid" label="openid" align="center"></el-table-column> -->

        <el-table-column prop="username" label="姓名" align="center"></el-table-column>
        <el-table-column prop="sex" label="性别" align="center"></el-table-column>
        <el-table-column prop="card" label="身份证号" align="center"></el-table-column>
        <el-table-column prop="iphone" label="手机号" align="center"></el-table-column>
        <el-table-column prop="address" label="地址" align="center"></el-table-column>
        <el-table-column prop="companyname" label="公司名称" align="center"></el-table-column>
        <el-table-column label="审核状态" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="shenhe(scope.row)"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="communityid" label="communityid" align="center"></el-table-column> -->
        <!-- <el-table-column prop="communityname" label="communityname" align="center"></el-table-column> -->
        <!-- <el-table-column prop="photo" label="photo" align="center"></el-table-column> -->
        <!-- <el-table-column prop="inorout" label="inorout" align="center"></el-table-column> -->
        <!-- <el-table-column prop="companynumber" label="companynumber" align="center"></el-table-column> -->
        <!-- <el-table-column prop="roomnumber" label="roomnumber" align="center"></el-table-column> -->
        <el-table-column label="操作" align="center" width="300">
          <template slot-scope="scope">
            <el-tooltip placement="left">
              <div slot="content">
                <img
                  :src="baseurl + 'img/' + scope.row.photo.split('/')[scope.row.photo.split('/').length - 1]"
                  alt
                  srcset
                  style="width: 300px;height: 400px;"
                />
              </div>
              <el-button type="primary" @click="1">查看头像</el-button>
            </el-tooltip>
            <el-button type="primary" @click="delrecord(scope.row)">删除</el-button>
            <el-button
              type="primary"
              @click="
                isupdate = true;
                refform = scope.row;
                isadddia = true;
              "
            >更新</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align:center;">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
        background
      ></el-pagination>
    </div>
    <el-dialog
      :title="isupdate ? '更新' : '添加'"
      :visible.sync="isadddia"
      center
      width="50%"
      @close="isadddia = false"
    >
      <el-form :model="refform" ref="refform" label-width="80px">
        <el-form-item label="id">
          <el-input v-model="refform.id"></el-input>
        </el-form-item>
        <el-form-item label="openid">
          <el-input v-model="refform.openid"></el-input>
        </el-form-item>
        <el-form-item label="username">
          <el-input v-model="refform.username"></el-input>
        </el-form-item>
        <el-form-item label="sex">
          <el-input v-model="refform.sex"></el-input>
        </el-form-item>
        <el-form-item label="card">
          <el-input v-model="refform.card"></el-input>
        </el-form-item>
        <el-form-item label="iphone">
          <el-input v-model="refform.iphone"></el-input>
        </el-form-item>
        <el-form-item label="address">
          <el-input v-model="refform.address"></el-input>
        </el-form-item>
        <el-form-item label="companyname">
          <el-input v-model="refform.companyname"></el-input>
        </el-form-item>
        <el-form-item label="status">
          <el-input v-model="refform.status"></el-input>
        </el-form-item>
        <el-form-item label="communityid">
          <el-input v-model="refform.communityid"></el-input>
        </el-form-item>
        <el-form-item label="communityname">
          <el-input v-model="refform.communityname"></el-input>
        </el-form-item>
        <el-form-item label="photo">
          <el-input v-model="refform.namphotoe"></el-input>
        </el-form-item>
        <el-form-item label="inorout">
          <el-input v-model="refform.inorout"></el-input>
        </el-form-item>
        <el-form-item label="companynumber">
          <el-input v-model="refform.companynumber"></el-input>
        </el-form-item>
        <el-form-item label="roomnumber">
          <el-input v-model="refform.roomnumber"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="isadddia = false">取 消</el-button>
        <el-button type="primary" @click="isupdate ? updaterecord() : addrecord()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="社区二维码" :visible.sync="isshowqr" width="30%" center @close="isshowqr = false">
      <div style="text-align:center;">
        <qriously :value="qrdata" :size="300" />
      </div>
      <span slot="footer">
        <el-button @click="isshowqr = false">取 消</el-button>
        <el-button type="primary" @click="isshowqr = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import renyuanService from "@/api/renyuanService";
import sysconfService from "@/api/sysconfService";

export default {
  components: {},
  data() {
    return {
      sex: '',
      options: [
        {
          value: "男",
          label: "男"
        },
        {
          value: "女",
          label: "女"
        },
        {
          value: "",
          label: "所有"
        }
      ],
      sname: "",
      pageSize: 5,
      currentPage: 1,
      totalNum: 0,
      isupdate: false,
      isshowqr: false,
      qrdata: "",
      tableData: [],
      isadddia: false,
      refform: {
        id: 0,
        openid: "",
        username: "",
        sex: "",
        card: "",
        iphone: "",
        address: "",
        companyname: "",
        status: 0,
        communityid: 0,
        communityname: 0,
        photo: "",
        inorout: 0,
        companynumber: 0,
        roomnumber: 0
      },
      baseurl: ""
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.initdata();
  },
  methods: {
    shenhe(row) {
      renyuanService.update(row).then(res => {
        this.$message.success("审核状态成功");
        this.initdata();
      });
    },
    sizeChange(val) {
      this.pageSize = val;

      this.initdata();
    },
    currentChange(val) {
      this.currentPage = val;
      this.initdata();
    },

    delrecord(row) {
      renyuanService.del(row).then(res => {
        console.log(res);
        this.initdata();
      });
    },
    updaterecord() {
      renyuanService.update(this.refform).then(res => {
        console.log(res);
        this.isadddia = false;
        this.initdata();
      });
    },
    initdata() {
      sysconfService
        .list({
          current: this.currentPage,
          size: this.pageSize,
          name: "baseurl"
        })
        .then(res => {
          console.log(res);
          this.baseurl = res.data.records[0].msg;
        });
      renyuanService
        .listv({
          current: this.currentPage,
          size: this.pageSize,
          username: this.sname,
          sex: this.sex
        })
        .then(res => {
          console.log(res);
          this.tableData = res.data.records;
          this.totalNum = res.data.total;
        });
    },
    isadd() {
      this.isadddia = true;
      this.isupdate = false;
      this.refform.code = "";
      this.refform.name = "";
    },
    addrecord() {
      // this.isadddia = true
      renyuanService.insert(this.refform).then(res => {
        console.log(res);
        if (res.code == 0) {
          this.isadddia = false;
          this.initdata();
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped></style>
